<template>
  <div class="order">
    <Header title="订单"></Header>
    <div class="content">
      <van-tabs v-model:active="active" color="#ffc400">
        <van-tab :title="item" v-for="(item, index) in Navdata" :key="index">
          <div
            v-show="item === '全部' && cartStore.AppendorderList.length"
            v-for="(i, index) in cartStore.AppendorderList"
            :key="index"
          >
            <van-card
              :num="i.num"
              :price="i.price"
              :title="i.title"
              :thumb="i.pic"
            />
          </div>
          <div v-show="!(item === '全部' && cartStore.AppendorderList.length)">
            <Empty></Empty>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <Footer></Footer>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Footer from "../../components/footer.vue";
import Header from "../home/components/Header.vue";
import Empty from "../../components/Empty.vue";
import { useCartStore } from "../../store/CartSore";
const Navdata = ref(["全部", "交易完成", "待付款", "代发货", "已发货"]);
const active = ref(0);
const cartStore = useCartStore();
</script>

<style scoped lang="less">
.order {
  display: flex;
  flex-flow: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
